<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>首页</title>
    <div th:include="common :: headcommon"></div>

<!--    切换栏目-->
<!--    <script type="text/javascript">-->
<!--        $(function () {-->
<!--            var oLi = document.getElementById("tab").getElementsByTagName("li");-->
<!--            var oUl = document.getElementById("ms-main").getElementsByTagName("div");-->
<!--            for (var i = 0; i < oLi.length; i++) {-->
<!--                oLi[i].index = i;-->
<!--                oLi[i].onmouseover = function () {-->
<!--                    for (var n = 0; n < oLi.length; n++) oLi[n].className = "";-->
<!--                    this.className = "cur";-->
<!--                    for (var n = 0; n < oUl.length; n++) oUl[n].style.display = "none";-->
<!--                    oUl[this.index].style.display = "block"-->
<!--                }-->
<!--            }-->
<!--        });-->
<!--    </script>-->
    <!--
    -->
</head>
<body>
<div th:replace="common :: #top_start"></div>


<div class="layui-container container">


    <!--    次级导航-->
    <div th:replace="common :: #ci_nav"></div>

    <div class="layui-row layui-col-space20">
        <div class="layui-col-md8">
            <div class="carousel">
                <div class="layui-carousel" id="images-carousel">
                    <!--          轮播图-->
                    <div carousel-item>
                        <div>
                            <a ><img lay-src="/images/1.jpeg" width="100%" height="280px;"/></a>
                        </div>
                        <div>
                            <img lay-src="/images/2.jpeg" width="100%" height="280px;"/>
                        </div>
                        <div>
                            <img lay-src="/images/3.jpg" width="100%" height="280px;"/>
                        </div>
                        <div>
                            <img lay-src="/images/4.jpg" width="100%" height="280px;"/>
                        </div>
                        <div>
                            <img lay-src="/images/5.jpg" width="100%" height="280px;"/>
                        </div>
                    </div>

                </div>
            </div>
            <div class="article-main">
                <h2>
                    新闻推荐
                </h2>
<!--                个人-->
                <div id="news"></div>
                <div id="pages"></div>

                <!--                分页处理-->
                <script  th:inline="javascript">
                    $(function(){
                        // console.log("1");
                        //数字1为从第一页开始访问，8为每页显示数据
                        queryAll(1,8);
                    })
                    function queryAll(pageNum,pageSize){
                        $.ajax({
                            type: 'POST',
                            url: "/index/queryAll", // ajax请求路径
                            async:false,
                            dataType: 'json',
                            data: {
                                "pageNum":pageNum,
                                "pageSize":pageSize
                            },
                            success: function(data)
                            {
                                console.log(data);
                                var res = data;
                                newsNum = res.data.length;
                                count = res.count;
                                layui.use('laypage', function()
                                {
                                    var laypage = layui.laypage;
                                    laypage.render({
                                        elem: 'pages' //注意，这里的 pages 是 ID，不用加 # 号
                                        ,count: count //数据总数，从服务端得到
                                        , limit: pageSize                     //每页显示条数
                                        ,curr: pageNum //获取起始页
                                        ,limits:[8,16,24]
                                        ,layout:['prev', 'page', 'next','limit','count','skip']
                                        //跳转页码时调用
                                        , jump: function (obj, first) { //obj为当前页的属性和方法，第一次加载first为true
                                            //非首次加载 do something
                                            if (!first) {
                                                //调用加载函数加载数据
                                                queryAll(obj.curr,obj.limit);
                                                layer.msg('第 '+ obj.curr +' 页');
                                                //返回顶部
                                                $(window).scrollTop(0);
                                                // window.location.href='/';
                                            }
                                        }
                                    });
                                    $("#news").children().remove();
                                    for(let i=0;i<newsNum;i++){
                                        //图片详细路径
                                        var detId="/article/details/"+res.data[i].id;
                                        // console.log(detId);
                                        var div='<div class="article-list">'+
                                        // '<figure><img th:src="${articles.imgSrc}" src="'+res.data[i].imgSrc+'"></figure>'+
                                            '<ul>'+
                                            '   <h3>'+
                                            // '<a href="/article/details/"'+res.data[i].id+'>'+res.data[i].title+'</a>'+
                                            '<a href='+detId+'>'+res.data[i].title+'</a>'+
                                                '</h3>'+
                                            '<div class="areahigh">'+
                                                '<p>'+res.data[i].content+'</p>'+
                                            '</div>'+
                                            '<p class="autor">'+
                                                ' <span class="lm f_l"><a  href="/cate/CateArticle/'+res.data[i].category.cid+'"> '+res.data[i].category.cname+'</a></span>'+
                                                '<span class="dtime f_l">'+res.data[i].createTime+'</span>'+
                                                '<span class="viewnum f_r">浏览（<a href="#">'+res.data[i].checkNum+'</a>）</span>'+
                                            // <span class="viewnum f_r">浏览（<a href="#">459</a>）</span>
                                            '</p>'+
                                            '</ul>'+'</div>';
                                        $("#news").append(div);
                                    }

                                })
                            }
                        });
                    }
                </script>

            </div>
            <!--分页-->
<!--                  <div id="page"></div>-->

        </div>

        <!--    左边栏-->
        <div class="layui-col-md4">

            <form class="layui-form" method="post" action="/article/search">
                <div class="layui-form-item">
                    <div class="layui-input-inline" style="width:76%;">
                        <input type="text" name="keyword" lay-verify="required" placeholder="请输入关键字" class="layui-input">
                    </div>
                    <button type="submit" class="layui-btn" lay-filter="search" lay-submit>搜索</button>
                </div>
            </form>

            <div class="ad"><img lay-src="/images/ad.jpg"></div>
            <div class="ms-top">
                <ul class="hd" id="tab">
                    <li class="cur"><a>点击排行</a></li>
                </ul>
            </div>
            <div class="ms-main" id="ms-main">
                <div style="display: block;" class="bd bd-news">
                    <ul >
                        <li th:each="rowlist:${session.rowLists}"><a   href="#" target="_blank" th:text="${rowlist.getTitle()}"
                                th:href="@{/article/details/{id}(id=${rowlist.getId()})}">住在手机里的朋友</a></li>

                    </ul>
                </div>

            </div>

            <div>
                <div class="bd-news">
                    <h3 class="per_test">最新新闻</h3>
                    <ul  >
                        <li th:each="newList:${session.newLists}"><a  href="#" target="_blank" th:text="${newList.getTitle()}"
                         th:href="@{/article/details/{id}(id=${newList.getId()})}">原来以为，一个人的勇敢是，删掉他的手机号码...</a></li>

                    </ul>
                </div>
            </div>


            <div class="tuwen">
                <h3>最新评论新闻</h3>
                <ul>
<!--                    <li><a href="#"><img lay-src="/images/01.jpg"><b>住在手机里的朋友</b></a>-->
                    <li th:each="newArt:${session.newComArt}" style="width: 320px;">
                        <a href="#" th:href="@{/article/details/{id}(id=${newArt.getId()})}" ><b th:text="${newArt.getTitle()}" class="newComArt">住在手机里的朋友</b></a>
                        <p><span  class="tulanmu">
                            <a th:each="category:${session.cateList}" target="_blank" href="#" th:if="${category.cid==newArt.cid}" th:text="${category.getCname()}" th:href="@{/cate/CateArticle/{cid}(cid=${category.cid})}">手机配件</a></span>
                            <span class="tutime" th:text="${#dates.format(newArt?.createTime, 'yyyy-MM-dd')}">2015-02-15</span>
                        </p>
                    </li>
                </ul>
            </div>


            <div class="ad"><img lay-src="/images/03.jpg"></div>
            <div class="links">
                <h3>友情链接</h3>
<!--                <h3><span>[<a href="#">申请友情链接</a>]</span>友情链接</h3>-->
                <ul>
                    <li><a href="https://www.runoob.com/" target="_blank">菜鸟教程</a></li>
                    <li><a href="https://www.w3school.com.cn/index.html" target="_blank">W3school</a></li>
                    <li><a href="https://www.layui.com" target="_blank">Layui官网</a></li>
                    <li><a href="http://www.baidu.com"  target="_blank">百度</a></li>
                    <li><a href="https://news.163.com/" target="_blank">网易新闻</a></li>
                    <li><a href="http://news.sohu.com/" target="_blank">搜狐新闻</a></li>
                    <li><a href="https://news.qq.com/" target="_blank">腾讯新闻</a></li>
                    <li><a href="https://news.sina.com.cn/" target="_blank">新浪新闻</a></li>
                </ul>
            </div>

        </div>
    </div>
</div>

<div th:replace="common :: #foot_start"></div>
</body>
</html>
